<template>
    <div>
        <el-dialog class="scan_dialog" title="扫描结果" v-model="show" width="1000px" draggable align-center
            :close-on-click-modal="false" :fullscreen="isFullscreen" destroy-on-close highlight-current-row>
            <template #header="{ titleId, titleClass }">
                <span :id="titleId" :class="titleClass">
                    <IconPlus name="scan" />
                    扫描结果
                </span>
                <button class="el-dialog__headerbtn full_btn" @click="toggleFullscreen">
                    <el-icon class="el-dialog__close">
                        <FullScreen></FullScreen>
                    </el-icon>
                </button>
            </template>
            <div class="body" v-loading="loading">
                <div>
                    <el-text type="success">新增接口：{{ data.added.length }}个</el-text>
                </div>
                <div class="table-wrapper">
                    <el-table ref="appendTableRef" :data="data.added" border stripe highlight-current-row
                        @selection-change="handleAddSelectionChange" @cell-dblclick="cellDblClickEvent"
                        @row-click="handleRowClick1">
                        <el-table-column type="selection" width="40" align="center" />
                        <el-table-column type="index" width="50" label="序号" align="center" />
                        <el-table-column label="接口地址" align="left" prop="path" :show-overflow-tooltip="true"
                            width="200" />
                        <el-table-column label="接口名称" align="center" prop="name" :show-overflow-tooltip="true"
                            width="150">
                            <template #default="{ row, column, $index }">
                                <span v-if="!enableEdit[$index][column.property]">
                                    {{ row[column.property] }}
                                </span>
                                <el-input v-else v-model="row[column.property]"
                                    @blur="editCloseEvent($index, column.property)" ref="inputRef">
                                    {{ row[column.property] }}
                                </el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="请求方法" align="center" prop="httpMethod" :show-overflow-tooltip="true"
                            width="80" />
                        <el-table-column label="权限字符串" align="left" prop="permissionKey" :show-overflow-tooltip="true">
                            <template #default="{ row, column, $index }">
                                <span v-if="!enableEdit[$index][column.property]">
                                    {{ row[column.property] }}
                                </span>
                                <el-input v-else v-model="row[column.property]"
                                    @blur="editCloseEvent($index, column.property)" ref="inputRef">
                                    {{ row[column.property] }}
                                </el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="接口描述" align="center" prop="desc" :show-overflow-tooltip="true">
                            <template #default="{ row, column, $index }">
                                <span v-if="!enableEdit[$index][column.property]">
                                    {{ row[column.property] }}
                                </span>
                                <el-input v-else v-model="row[column.property]"
                                    @blur="editCloseEvent($index, column.property)" ref="inputRef">
                                    {{ row[column.property] }}
                                </el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="授权访问" align="center" prop="authRequired" :show-overflow-tooltip="true">
                            <template #default="{ row, column, $index }">
                                <span v-if="!enableEdit[$index][column.property]">
                                    <dict-tag :options="sys_yes_no" :value="row[column.property]" />
                                </span>
                                <el-select v-else v-model="row[column.property]"
                                    @blur="editCloseEvent($index, column.property)" placeholder="请选择" clearable
                                    ref="selectRef">
                                    <el-option v-for="dict in sys_yes_no" :key="dict.value" :label="dict.label"
                                        :value="dict.value" />
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="日志记录" align="center" prop="isTrack" :show-overflow-tooltip="true">
                            <template #default="{ row, column, $index }">
                                <span v-if="!enableEdit[$index][column.property]">
                                    <dict-tag :options="sys_normal_disable" :value="row[column.property]" />
                                </span>
                                <el-select v-else v-model="row[column.property]"
                                    @blur="editCloseEvent($index, column.property)" placeholder="请选择" clearable
                                    ref="selectRef">
                                    <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label"
                                        :value="dict.value" />
                                </el-select>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div>
                    <el-text type="danger" style="padding-bottom: 10px;">已删除接口：{{ data.deleted.length
                    }}个</el-text>
                </div>
                <div class="table-wrapper">
                    <el-table ref="removeTableRef" :data="data.deleted" border stripe highlight-current-row
                        max-height="100%" @selection-change="handleDeletedSelectionChange" @row-click="handleRowClick2">
                        <el-table-column type="selection" width="40" align="center" />
                        <el-table-column type="index" width="50" label="序号" align="center" />
                        <el-table-column label="接口地址" align="left" prop="path" :show-overflow-tooltip="true"
                            width="200" />
                        <el-table-column label="接口名称" align="center" prop="name" :show-overflow-tooltip="true"
                            width="150" />
                        <el-table-column label="请求方法" align="center" prop="httpMethod" :show-overflow-tooltip="true"
                            width="80" />
                        <el-table-column label="权限字符串" align="left" prop="permissionKey"
                            :show-overflow-tooltip="true" />
                        <el-table-column label="接口描述" align="center" prop="desc" :show-overflow-tooltip="true" />
                        <el-table-column label="授权访问" align="center" prop="path" :show-overflow-tooltip="true"
                            width="80">
                            <template #default="{ row }">
                                <dict-tag :options="sys_yes_no" :value="row.authRequired" />
                            </template>
                        </el-table-column>
                        <el-table-column label="日志记录" align="center" prop="isTrack" :show-overflow-tooltip="true">
                            <template #default="{ row, column, $index }">
                                <dict-tag :options="sys_normal_disable" :value="row.isTrack" />
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <template #footer>
                <div style="display: flex;">
                    <el-text style="flex: 1;text-align: left;"
                        type="warning">注:新增接口中的接口名称,权限字符串，授权访问,接口描述双击可进入编辑模式</el-text>
                    <div>
                        <el-button @click="handleClose">取 消</el-button>
                        <el-button type="primary" @click="handleSync">同 步</el-button>
                    </div>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
const { proxy } = getCurrentInstance()
const { sys_normal_disable, sys_yes_no } = proxy.useDict("sys_normal_disable", "sys_yes_no");
const show = defineModel({ required: true, default: false })
const { data, loading } = defineProps({
    loading: {
        type: Boolean,
        default: false,
    },
    data: { type: Object }
})
const emits = defineEmits(["onConfirm", "onCancle"])


const appendTableRef = ref();
const removeTableRef = ref();

const isEditing = ref(false);
const enableEdit = ref([]);

const enableEditProperty = ["name", "permissionKey", "desc", "authRequired", "isTrack"]
const inputRef = ref();   //表格输入框
const selectRef = ref();   //表格下拉框

const state = reactive({
    isFullscreen: false,
    checked: {
        added: [],
        deleted: [],
    }
})
const { isFullscreen } = toRefs(state)

// 监听 scanDialogState.data.added 的变化，同步更新 isEditing
watch(
    () => data.added,
    (newData) => {
        if (!isEditing.value) {
            enableEdit.value = newData.map(() => ({
                name: false,
                permissionKey: false,
                desc: false,
            }));
        }
    },
    { deep: true }
);

//全屏切换
const toggleFullscreen = () => {
    isFullscreen.value = !isFullscreen.value
}

/**新增勾选 */
const handleAddSelectionChange = (selection) => {
    state.checked.added = selection;
}

/**删除勾选 */
const handleDeletedSelectionChange = (selection) => {
    state.checked.deleted = selection;
}

/**同步确认 */
const handleSync = () => {
    let data = state.checked;
    if (data.added.length <= 0 && data.deleted.length <= 0) {
        proxy.$modal.msgWarning("请选择需要同步的数据");
        return;
    }
    emits("onConfirm", data, handleClose);
}

/**关闭扫描结果 */
const handleClose = () => {
    show.value = false;
    state.checked = {
        added: [],
        deleted: [],
    };
}


/**单元格双击进入编辑模式 */
const cellDblClickEvent = (row, column) => {
    isEditing.value = false;
    let index = data.added.findIndex(data => data == row);
    enableEdit.value.forEach((item, idx) => {
        enableEditProperty.forEach((prop) => {
            var edit = prop == column.property && idx == index;
            item[prop] = edit;
            if (edit) isEditing.value = edit;
        })
    });
    nextTick(() => {
        if (isEditing.value)
            if (inputRef.value)
                inputRef.value.focus();
            else if (selectRef.value)
                selectRef.value.focus();
    })
}

/**编辑完成事件 */
const editCloseEvent = (index, prop) => {
    enableEdit.value[index][prop] = false;
    isEditing.value = false;
}

/**新增接口单击行事件 */
const handleRowClick1 = (row) => {
    appendTableRef.value.toggleRowSelection(row);
}

/**删除接口单击行事件 */
const handleRowClick2 = (row) => {
    removeTableRef.value.toggleRowSelection(row);
}



</script>



<style lang="scss" scoped>
.full_btn {
    right: 48px
}

:deep(.el-dialog__title) {
    display: flex;
    align-items: center;
    gap: 5px;
}

:deep(.el-dialog) {
    display: flex;
    flex-direction: column;
}

:deep(.el-dialog__body) {
    flex: 1;
    overflow: hidden;
}


.body {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.table-wrapper {
    height: 250px;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .el-table {
        flex: 1;
    }
}

.is-fullscreen .table-wrapper {
    flex: 1;
}
</style>